<template>
  <div class="customer-detail">
    <Customer :form="infoData.info" />

    <Cate :cates="infoData.catList" :ori="ori" />

    <Qualica :list="infoData.qualificationList" />

    <Address :list="infoData.shippingDetailList" />

    <Pay :ori="ori" :monthlyFlag="infoData.monthlyFlag" :list="infoData.monthlySupplierList" @complete="onComplete" />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import api from '@/api'
import consts from '@/consts'
import Reject from '@/components/reject/index.vue'
import Customer from '@/components/info/customer.vue'
import Cate from '@/components/info/cate.vue'
import Qualica from '@/components/info/qualica.vue'
import Address from '@/components/info/address.vue'
import Pay from '@/components/info/pay.vue'

const router = useRouter()
const route = useRoute()

const ori = route.meta.ori || ''

const customerId = route.params.id

const infoData = reactive({
  info: {},
  shippingDetailList: [],
  qualificationList: [],
  catList: [],
  monthlySupplierList: [],
  monthlyFlag: ''
})

const loading = ref(false)
const rejectVisible = ref(false)

const updateCustomerMonthly = async (params) => {
  params.customerId = customerId
  let { err } = await api.post('/medinstrument/boss/customer/updateCustomerMonthly', params)
  if (err) {
    ElMessage.error(err)
  } else {
    loadData()
  }
}

const loadData = async () => {
  loading.value = true
  let url = `/medinstrument/boss/customer/getCustomerById?customerId=${customerId}`
  let { data, err } = await api.get(url)
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    infoData.info = data
    infoData.shippingDetailList = data.customerShippingDetailList
    infoData.qualificationList = data.customerQualificationList
    infoData.catList = data.apparatusCategoryIds
    infoData.monthlyFlag = data.monthlyFlag
    infoData.monthlySupplierList = data.supplierIds
  }
}

const onComplete = (val) => {
  updateCustomerMonthly(val)
}

onMounted(() => {
  loadData()
})
</script>

<style scoped lang="scss">
.customer-detail {
  margin: 10px 15px 10px 10px;
}
</style>
